跳到主要内容

Angular 开发步骤

资料：

一 新建页面

Angualr常用命令

1、使用 ng g module ### --routing 创建一个带路由的模块。
2、使用 ng g module ### 创建模块命令
3、使用 ng new ### 创建项目命令
4、使用 ng g component ### 创建组件命令
5、使用 ng g service 创建服务命令
6、使用 ng serve --open 启动服务
  • 当我们拿到新需求的时候，前端如何创建新页面？

⏺️第一步，我们需要利用Angualr自带的命令来创建页面 首先我们需要利用ng g component 命令来创建页面，下面来个案例

ng g c pages/report/day-report

该命令就是在pages目录下新增day-report组件，这样就完成了新组件的创建 ⏺️第二步，组件中心注册，ComponentFactory，进行组件的注册，方便菜单的调用，当然在这里也可以快速搜索其他组件信息 image.png ⏺️第三步，权限系统新增菜单信息，权限系统是一个公共系统，水电通用管理 ⏺️第四步，运行系统，可以看到我们新建的页面

ng serve --open

二 开发页面

Angualr 开发页面的结构，其实跟后端差不多，没有那么多的状态，插件，等等管理 开发需要关注的主要三个目录结构： ⏺️pages：自定义的组件，编写业务代码，具体的组件框架，参考NG-ZORRO - Angular UI component library，框架库 ⏺️model：实体类定义层，主要采用Ts语法编写 🌈service：接口层，主要定义与后台交互的接口 有了上面的三个我们就可以进行页面的开发了 image.png